<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>YOLO 项目鱼骨图</title>
</head>
<body>
<canvas id="fishbone" width="1200" height="800" style="border:1px solid #ccc;"></canvas>

<script>
const canvas = document.getElementById("fishbone");
const ctx = canvas.getContext("2d");

// 主骨干
ctx.beginPath();
ctx.moveTo(100, 400);
ctx.lineTo(1000, 400);
ctx.strokeStyle = "#333";
ctx.lineWidth = 2;
ctx.stroke();
ctx.closePath();

// 画主问题标题
ctx.font = "bold 20px Arial";
ctx.fillStyle = "#000";
ctx.fillText("YOLO识别项目问题", 1020, 405);

// 定义鱼刺内容和位置
const causes = [
  { title: "数据问题", items: ["不平衡", "标签错误", "模糊图像", "背景干扰"], yOffset: -120 },
  { title: "模型问题", items: ["版本选择", "超参数", "过拟合", "Anchor设置"], yOffset: -60 },
  { title: "训练问题", items: ["增强不当", "训练不足", "GPU限制", "学习率问题"], yOffset: -180 },
  { title: "部署问题", items: ["速度慢", "转换误差", "内存高", "边缘部署失败"], yOffset: 60 },
  { title: "输入问题", items: ["图像差", "压缩模糊", "角度偏", "光照问题"], yOffset: 120 },
  { title: "系统集成", items: ["接口异常", "延迟大", "展示慢", "读写错误"], yOffset: 180 }
];

// 画每条鱼刺
causes.forEach((cause, index) => {
  const x = 200 + index * 100;
  const y = 400;
  const yEnd = y + cause.yOffset;

  // 鱼刺线
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x, yEnd);
  ctx.strokeStyle = "#666";
  ctx.stroke();
  ctx.closePath();

  // 分类标题
  ctx.font = "bold 14px Arial";
  ctx.fillStyle = "#0066cc";
  ctx.fillText(cause.title, x - 30, yEnd - (cause.yOffset > 0 ? -20 : 20));

  // 子问题
  ctx.font = "12px Arial";
  ctx.fillStyle = "#000";
  cause.items.forEach((item, i) => {
    ctx.fillText(item, x - 40, yEnd + (i + 1) * (cause.yOffset > 0 ? 15 : -15));
  });
});
</script>
</body>
</html>
